<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #app {
            width: 600px;
            margin: 10px auto;
        }
        
        .tb {
            border-collapse: collapse;
            width: 100%;
        }
        
        .tb th {
            background-color: #0094ff;
            color: white;
        }
        
        .tb td,
        .tb th {
            padding: 5px;
            border: 1px solid black;
            text-align: center;
        }
        
        .add {
            padding: 5px;
            border: 1px solid black;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 添加商品
        1. 给button绑定click事件
        2. 用v-model给input绑定data中数据name 
        3. 调用methods中的addItem方法
        4. 把数据传递给方法
        5. 向items数组中添加数据
      
      -->
        <div class="add">
            品牌名称:
            <input v-focus type="text" v-model="name">
            <input :disabled="name.length===0" @click="addItem" type="button" value="添加">
        </div>

        <div class="add">
            品牌名称:
            <input type="text" v-model="searchValue" placeholder="请输入搜索条件">
        </div>

        <div>
            <table class="tb">

                <tr>
                    <th>编号</th>
                    <th>品牌名称</th>
                    <th>创立时间</th>
                    <th>操作</th>
                </tr>
                <!-- 一 渲染表格
            1. 在data中准备数据items:[]
            2. v-for渲染列表 tr
            3. 插值表达式 渲染items中的数据
          -->

                <tr v-for="(item,index) in items">
                    <td>{{index+1}}</td>
                    <td>{{item.name}}</td>
                    <!-- <td>{{item.date}}</td> -->
                    <!--在视图中渲染日期的位置使用过滤器-->
                    <td>{{ item.date | fmtDate('YYYY-MM-DD HH:mm:ss') }}</td>
                    <!-- 二 删除数据
                      1. 绑定click事件
                      2. 取消默认的点击事件
                      3. 调用methods中的deleItem方法
                      4. 调用方法时,把当前点击的a所在的tr对应的下标index传进去
                      5. 从items数组中删除当前这条数据
                    -->
                    <td>
                        <a href="#" @click.prevent="deleItem(index)">删除</a>
                    </td>
                </tr>
                <!-- 条件渲染v-if -->
                <tr v-if="items.length===0">
                    <td colspan="4">没有品牌数据</td>
                </tr>
            </table>
        </div>
    </div>
    <!-- 1 导入vue.js
        2 实例化Vue对象
        3 设置Vue实例对象的选项, 如el data等 -->
    <script src="../node_modules/vue/dist/vue.js"></script>

    <!-- 引入axios -->
    <script src="../node_modules/axios/dist/axios.js"></script>

    <script src="../node_modules/moment/moment.js"></script>

    <script>
        // 2 定义全局过滤器
        Vue.filter('fmtDate', (v, fmtString) => {
            // 3 在过滤器的方法中,使用moment包对data中的日期进行处理
            return moment(v).format(fmtString);
        });

        // 定义全局自定义指令-自动聚焦
        Vue.directive('focus', {
            // 当被绑定的元素插入到 DOM 中时,inserted会被调用
            inserted: (el) => {
                // el 就是指令所在的DOM对象
                el.focus();
            }
        });

        new Vue({
            el: '#app',
            data: {
                items: [],
                name: '',
                searchValue: ''
            },
            // 当页面加载完毕之后执行
            mounted() {
                // 加载列表数据
                this.loadData();
            },

            methods: {
                // 加载列表数据
                loadData() {
                    // 加载数据
                    axios
                        .get('http://localhost:3000/brands')
                        .then((res) => {
                            this.items = res.data;
                        })
                        .catch((err) => {
                            console.log(err);
                        });
                },
                deleItem: function(id) {
                    // 删除提示
                    if (!confirm('是否确认删除？')) {
                        return;
                    }
                    axios
                        .delete('http://127.0.0.1:3000/brands/' + id)
                        .then((res) => {
                            if (res.status === 200) {
                                // 删除成功
                                this.loadData();
                            } else {
                                alert('删除失败');
                            }
                        })
                        .catch((err) => {
                            console.log(err);
                        })
                },
                addItem: function(name) {
                    axios
                        .post('http://localhost:3000/brands', {
                            name: this.name,
                            date: new Date()
                        })
                        .then((res) => {
                            // 判断响应码  201  created
                            if (res.status === 201) {
                                // 添加成功 重新加载列表
                                this.loadData();
                            } else {
                                alert('添加失败');
                            }
                        })
                        .catch((err) => {
                            console.log(err);
                        })
                }

            },
            // 侦听器
            watch: {
                // 监听的是data中的属性searchValue
                searchValue(nValue, oValue) {
                    // console.log(newValue, oldValue);
                    // 发送异步请求
                    axios
                        .get('http://127.0.0.1:3000/brands?name=' + nValue)
                        .then((res) => {
                            this.items = res.data;
                        });
                }
            }
        });
    </script>

</body>

</html>